<template>
    <div class="personal_data">
        <div class="main bg_white">
            <h3>个人资料</h3>
            <ul class="clearfloat">
                <li class="clearfloat">
                    <span class="fl">头像:</span>
                    <div class="header_right fl">
                        <div class="header fl">
                            <div class="header_img"  v-if="headerImg">
                                <img v-bind:src="headerImg|filterHeader" alt="">
                            </div>
                            <div class="header_icon" v-else>
                                <i class="iconfont">&#xe638;</i>
                            </div>
                        </div>
                        <div class="upload fl">
                            <p>支持 jpg、png 格式大小 5M 以内的图片</p>
                            <input type="file" @change="uploadHeader" name="headerImg">
                            <button class="pointer">点击上传</button>
                        </div>
                    </div>
                </li>
                <li index="0">
                    <span>用户名：</span>
                    <input type="text" v-model="username" placeholder="请输入用户名" @focus=" showModifyFun">
                    <div class="operation">
                        <button v-if="operation[0]" @click="showModifyFun"><i class="iconfont">&#xe652;</i>修改</button>
                        <div v-else>
                            <span class="bule" @click="releaseUserData">保存</span>
                            <span @click="hiddenModifyFun">取消</span>
                        </div>
                    </div>
                </li>
                <li index="1">
                    <span>职位：</span>
                    <input type="text" v-model="position" placeholder="请输入职位"  @focus=" showModifyFun">
                    <div class="operation">
                        <button v-if="operation[1]" @click="showModifyFun"><i class="iconfont">&#xe652;</i>修改</button>
                        <div v-else>
                            <span class="bule" @click="releaseUserData">保存</span>
                            <span @click="hiddenModifyFun">取消</span>
                        </div>
                    </div>
                </li>
                <li index="2">
                    <span>公司：</span>
                    <input type="text" v-model="company" placeholder="请输入公司名称"  @focus=" showModifyFun">
                    <div class="operation">
                        <button v-if="operation[2]" @click="showModifyFun"><i class="iconfont">&#xe652;</i>修改</button>
                        <div v-else>
                            <span class="bule" @click="releaseUserData">保存</span>
                            <span @click="hiddenModifyFun">取消</span>
                        </div>
                    </div>
                </li>
                <li index="3">
                    <span>个人介绍：</span>
                    <input type="text" v-model="personalIntorduction" placeholder="请输入个人介绍"  @focus=" showModifyFun">
                    <div class="operation">
                        <button v-if="operation[3]" @click="showModifyFun"><i class="iconfont">&#xe652;</i>修改</button>
                        <div v-else>
                            <span class="bule" @click="releaseUserData">保存</span>
                            <span @click="hiddenModifyFun">取消</span>
                        </div>
                    </div>
                </li>
                <li index="4">
                    <span>个人主页：</span>
                    <input type="text" v-model="personalWeb" placeholder="请输入个人主页的地址"  @focus=" showModifyFun">
                    <div class="operation">
                        <button v-if="operation[4]" @click="showModifyFun"><i class="iconfont">&#xe652;</i>修改</button>
                        <div v-else>
                            <span class="bule" @click="releaseUserData">保存</span>
                            <span @click="hiddenModifyFun">取消</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="error_message" v-bind:class="{active:errMessage}">{{errMessage}}</div>
    </div>
</template>
<script>
import axios from "axios"
import filterHeader from '../../../assets/js/filterHeaderImg.js'
   export default{
       data(){
           return {
               headerImg:"",//图片地址
               username:"",//用户名字
               position:'',//职位
               company:'',//公司
               personalIntorduction:'',//个人介绍
               personalWeb:'',//个人主页
               operation:[true,true,true,true,true],
               errMessage:'',//错误信息
           }
       },
       methods:{
        //显示保存按钮
           showModifyFun:function(e){
               var index;
               for(var i=0; i<this.operation.length;i++){
                   this.$set(this.operation,i,true)
               }
               if(e.target.parentNode.parentNode.getAttribute('index')){
                   index = e.target.parentNode.parentNode.getAttribute('index');
               }else if(e.target.parentNode.getAttribute('index')){
                   index = e.target.parentNode.getAttribute('index');
               }else{
                   index = e.target.parentNode.parentNode.parentNode.getAttribute('index');
               }
                this.hiddenerrMessage();
               this.$set(this.operation,index,false)
           },
            //隐藏保存按钮
           hiddenModifyFun:function(e){
               var index;
               var index;
               if(e.target.parentNode.parentNode.getAttribute('index')){
                   index = e.target.parentNode.parentNode.getAttribute('index');
               }else if(e.target.parentNode.getAttribute('index')){
                   index = e.target.parentNode.getAttribute('index');
               }else{
                   index = e.target.parentNode.parentNode.parentNode.getAttribute('index');
               }
               this.$set(this.operation,index,true)
           },
        //保存用户信息
        releaseUserData:function(){
            var that = this;
            axios.post('/api/personal/releaseUserData',{
                _id:that.$store.state.userId,
                username:that.username,
                headerImg:that.headerImg,
                position:that.position ,
                company:that.company,
                personalIntorduction:that.personalIntorduction,
                personalWeb:that.personalWeb,
            }).then(function(res){
                if(res.data.ok===1){
                     that.errMessage = "保存成功";
                     setTimeout(function(){
                         that.errMessage="";
                     },2000)
                    that.getUserData()
                }
            })          
        },
        // 隐藏用户错误提示
        hiddenerrMessage:function(){
            this.errMessage='';
        },
        // 获取用户信息
        getUserData:function(){
            var that = this
            axios('/api/islogin').then(function(response){
                    if(response.data.state==='1'){
                        that.$store.commit('USERID',response.data.id)
                        that.$store.commit('ISLOGING',true)   
                        
                        axios.get('/api/personal/getUserData',{
                            params:{
                                _id:that.$store.state.userId
                            }
                        }).then(function(response){
                            that.username=response.data[0].username;
                            that.headerImg = response.data[0].headerImg;
                            that.position = response.data[0].position;
                            that.company = response.data[0].company;
                            that.personalIntorduction = response.data[0].personalIntorduction;
                            that.personalWeb = response.data[0].personalWeb;
                            that.$store.commit('HEADERIMG',response.data[0].headerImg);
                        }).catch(function(err){
                            console.log(err)
                        })
                        
                    }else{
                        that.$store.commit('ISLOGING',false);  
                        that.$store.commit('LOGINBOX',true);        
                    }
            })
        },
        // 头像上传
        uploadHeader:function(e){
            var headerImg = e.target.files[0];
            let param = new FormData(); //创建form对象
            param.append('file',headerImg);
            param.append('_id',this.$store.state.userId);
            let config = {
            headers:{'Content-Type':'multipart/form-data'}
          }; 
          var that = this;
            axios.post('/api/personal/uploadHeader',param,config)
            .then(function(res){
                if(res.data.ok===1){
                that.getUserData();
                   
                }
            })
        }
       },
       created:function(){
            //    判断是否登录并获取用户信
             this.getUserData()
        },
        filters:{
            filterHeader:filterHeader
        }
   } 
</script>
<style lang="scss" src="../../../assets/css/personalData.scss" scoped>

</style>

